<template>
	<view class="container">
		<view class="" v-if="!show_loading">
			<view class="image_container">
				<view class="inside_round">
					<view class="image_box">
						<view class="mask"></view>
						<image class="good_image" :src="pic" mode="scaleToFill"></image>
					</view>
				</view>
			</view>
			<view class="start_info_container">
				<view class="header">
					<text>读取中</text>
					<text class="percent">{{ percent }}%</text>
				</view>
				<view class="info_item info_item1">
					<text class="info_item_title">商品信息</text>
					<u-icon name="checkmark" color="#4fa388" size="28"></u-icon>
				</view>
				<view class="info_item info_item2">
					<text class="info_item_title">溯源信息</text>
					<u-icon name="checkmark" color="#4fa388" size="28"></u-icon>
				</view>
				<view class="info_item info_item3">
					<text class="info_item_title">质检报告</text>
					<u-icon name="checkmark" color="#4fa388" size="28"></u-icon>
				</view>
				<view class="info_item info_item4">
					<text class="info_item_title">企业资质</text>
					<u-icon name="checkmark" color="#4fa388" size="28"></u-icon>
				</view>
			</view>
		</view>
		<view class="" v-if="show_loading"><loading></loading></view>
	</view>
</template>

<script>
import loading from './components/loading';
const app = getApp().globalData;
export default {
	props: {
		start_loading: {
			type: Boolean
		},
		pic: {
			type: String
		}
	},
	computed: {
		show_loading() {
			return this.start_loading;
		},
		loading_image() {
			return this.pic ? this.pic : app.sourceImage;
		}
	},
	watch: {
		show_loading: {
			handler(val) {
				if (typeof val == 'boolean' && !val) {
					this.timer = setInterval(() => {
						this.percent += 1;
						if (this.percent == 100) {
							clearInterval(this.timer);
							this.$emit('getStartData', { show_loading: false });
						}
					}, 26);
				}
			},
			immediate: true
		}
	},
	components: {
		loading
	},
	data() {
		return {
			percent: 0,
			timer: ''
		};
	}
};
</script>

<style lang="scss">
.container {
	width: 100%;
	height: 100vh;
	background-color: transparent;
	overflow: hidden;
	// background: linear-gradient(0deg, #eff9f8, #eff9f8);
	display: flex;
	align-items: center;
	flex-direction: column;
	position: fixed;
	top: 0;
	z-index: 999;
	background: white;
	background-image: url(https://copartner.oss-cn-beijing.aliyuncs.com/logo/2401/23/dQDcTODTaIiAbSFJqbsAeBHL1mzxFzYlqvp5TCdH.png);
	background-repeat: no-repeat;
	background-size: 750rpx;
	background-position: 0 0;
}
.image_container {
	width: 406rpx;
	height: 406rpx;
	margin-top: 226rpx;
	margin-bottom: 160rpx;
	border-radius: 50%;
	// border: 1px solid #4fa388;
	display: flex;
	align-items: center;
	justify-content: center;
	.inside_round {
		width: 600rpx;
		height: 600rpx;
		position: relative;
		// overflow: hidden;
		border-radius: 50%;
		font-size: 0;
		// border: 1px solid #4fa388;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.inside_round::before {
		content: ' ';
		width: 600rpx;
		height: 600rpx;
		position: absolute;
		font-size: 0;
		left: -25%;
		top: 0;
		background-image: url(https://copartner.oss-cn-beijing.aliyuncs.com/logo/2401/23/PWA3JPOhwFZa86G5zxSTIPt05WKry6pOdZRHEk42.png);
		background-repeat: no-repeat;
		background-size: 100%;
		animation: rotation 2.5s linear infinite;
	}
	.inside_round::after {
		content: ' ';
		width: 450rpx;
		height: 700rpx;
		position: absolute;
		font-size: 0;
		left: -5.5%;
		top: 12%;
		background-image: url(https://copartner.oss-cn-beijing.aliyuncs.com/logo/2401/23/ypSmOGolZliGQJ9QdVQvtLbtEtSgoaciKcg6u1LD.png);
		background-repeat: no-repeat;
		background-size: 100%;
		// animation: rotation 2.5s linear infinite;
	}
	.image_box {
		width: 290rpx;
		height: 290rpx;
		background-color: transparent;
		border-radius: 50%;
		overflow: hidden;
		position: relative;
		z-index: 99;
		image {
			display: block;
			width: 100%;
			height: 100%;
		}
		.mask {
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 100rpx;
			background: -webkit-linear-gradient(top, transparent 0%, #4fa388 100%);
			z-index: 1;
			border-bottom: 1rpx solid #4fa388;
			animation: mask 1.5s linear infinite;
		}
	}
}
.start_info_container {
	width: 406rpx;
	height: 406rpx;
	margin-top: 280rpx;
	.header {
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 15rpx;
		text {
			font-size: 36rpx;
			font-family: Source Han Sans CN;
			font-weight: 600;
			color: #000000;
			line-height: 76rpx;
			padding: 0 16rpx;
			&.percent {
				color: #4fa388;
			}
		}
	}
	.info_item {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 5rpx 0;
		.info_item_title {
			padding-right: 38rpx;
			color: #777777;
		}
		animation: item_roll 1s ease-in-out both;
	}
	.info_item1 {
		animation-delay: 0.4s;
	}
	.info_item2 {
		animation-delay: 0.8s;
	}
	.info_item3 {
		animation-delay: 1.2s;
	}
	.info_item4 {
		animation-delay: 1.6s;
	}
}

@keyframes item_roll {
	0% {
		opacity: 0;
		transform: translateY(150rpx);
	}
	100% {
		opacity: 1;
		transform: translateY(0);
	}
}
@keyframes rotation {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(360deg);
	}
}
@keyframes mask {
	from {
		top: -100rpx;
	}
	to {
		top: 290rpx;
	}
}
</style>
